<script setup>
import {ref, watch} from "vue";
import requestUtil from "@/utils/request";
import {ElMessage} from "element-plus";

// const TableData = ref([])

const props = defineProps({
  id: {
    type: Number,
    default: -1,
    required: true
  },
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true
  },
  // tableData: {
  //   type: Array,
  //   default: () => [],
  //   required: true
  // },
})

const form = ref({
  id: -1,
  name: '',
  phone_number: '',
  email: '',
  feishu_bot: '',
  feishu_bot_sign: '',
  ding_talk: '',
  ding_talk_sign: '',
  qw_id: '',
  qw_robot_secret: '',
  qw_agent_id: '',
  qw_to_user: '',
  create_time: '',
})

const checkPersonName = async (rule, value, callback) => {
  if (!value) return callback(new Error('联系人不能为空')) // 优先检查空值

  // 仅在新增模式时校验
  if (props.id === -1) {  // 使用props.id判断模式
    try {
      const res = await requestUtil.post('monitor_alert/person/check', {name: value})
      const data = res.data
      if (data.code === 500) {
        callback(new Error(data.msg))
      } else {
        callback()
      }
    } catch (e) {
      callback(new Error('校验服务异常'))
    }
  } else {
    callback()
  }
}

const rules = ref({
  name: [
    {required: true, message: '分组名称不能为空', trigger: 'blur'},
    {validator: checkPersonName, trigger: 'blur'}
  ],
  phone_number: [{
    pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
    message: '请输入正确的手机号码',
    trigger: 'blur'
  }],
  email: [{
    type: 'email',
    message: '请输入正确的邮箱地址',
    trigger: ['blur', 'change']
  }],
})

const formRef = ref(null)

const initFormData = async (id) => {
  const res = await requestUtil.get('monitor_alert/person/action?id=' + id)
  form.value = res.data.msg
  console.log(form.value, '-----------------------form.value')
}

const emits = defineEmits(['update:modelValue', 'initTableData'])

const handleClose = () => {
  formRef.value.resetFields()
  emits('update:modelValue', false)
}

const handleConfirm = () => {
  formRef.value.validate(async (valid) => {
    try {
      if (valid) {
        let res = await requestUtil.post('monitor_alert/person/action', form.value);
        let data = res.data;
        if (data.code === 200) {
          ElMessage.success('执行成功')
          formRef.value.resetFields()
          emits('initTableData')
          handleClose()
        } else {
          ElMessage.error(data.msg)
        }
      } else {
        console.log('fail')
      }
    } catch (error) {
      console.error('Error fetching table data:', error)
      ElMessage.error('请求失败，请稍后再试')
    }
  })
}

watch(
    () => props.dialogVisible,
    () => {
      let id = props.id;
      console.log(props.id, '-----------')
      // TableData.value = props.tableData;
      if (id !== -1) {
        initFormData(id);
      } else {
        form.value = {
          id: -1,
          name: '',
          phone_number: '',
          email: '',
          feishu_bot: '',
          feishu_bot_sign: '',
          ding_talk: '',
          ding_talk_sign: '',
          qw_id: '',
          qw_robot_secret: '',
          qw_agent_id: '',
          qw_to_user: '',
          create_time: '',
        }
      }
    }
)
</script>

<template>
  <el-dialog
      model-value="dialogVisible"
      :title="dialogTitle"
      style="padding: 40px;margin-top: 40px"
      width="700px"
      @close="handleClose"
      :close-on-click-modal="false"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="150px"
    >
      <el-form-item label="姓名:" prop="name">
        <el-input v-model="form.name" placeholder="请输入联系人姓名"></el-input>
      </el-form-item>

      <el-form-item label="手机号:" prop="phone_number">
        <el-input v-model="form.phone_number" placeholder="请输入手机号"></el-input>
      </el-form-item>

      <el-form-item label="邮箱:" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <el-form-item label="飞书群机器人:" prop="feishu_bot">
        <el-input v-model="form.feishu_bot" placeholder="https://open.feishu.cn/open-apis/bot/v2/hook/xxx"></el-input>
      </el-form-item>
      <el-form-item label="飞书群机器人签名:" prop="feishu_bot_sign">
        <el-input v-model="form.feishu_bot_sign" placeholder="请输入飞书群机器人签名"></el-input>
      </el-form-item>

      <el-form-item label="钉钉:" prop="ding_talk">
        <el-input v-model="form.ding_talk"
                  placeholder="https://oapi.ding_talk.com/robot/send?access_token=xxx"></el-input>
      </el-form-item>
      <el-form-item label="钉钉签名:" prop="ding_talk_sign">
        <el-input v-model="form.ding_talk_sign"
                  placeholder="请输入钉钉签名"></el-input>
      </el-form-item>

      <el-form-item label="企业微信_企业ID:" prop="qw_id">
        <el-input v-model="form.qw_id"
                  placeholder="请输入企业微信_企业ID"></el-input>
      </el-form-item>
      <el-form-item label="自建应用Secret:" prop="qw_robot_secret">
        <el-input v-model="form.qw_robot_secret"
                  placeholder="请输入企业微信_自建应用Secret"></el-input>
      </el-form-item>
      <el-form-item label="自建应用AgentId:" prop="qw_agent_id">
        <el-input v-model="form.qw_agent_id"
                  placeholder="请输入企业微信_自建应用AgentId"></el-input>
      </el-form-item>
      <el-form-item label="企业微信账号ID:" prop="qw_to_user">
        <el-input v-model="form.qw_to_user"
                  placeholder="请输入企业微信_用户账号ID"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>